SherbyNet - /page/wikibook/entry.mu

Micron Document

<!DOCTYPE html>

<title>WebGPU Shading Language</title>

</head>

<span id="openzim-page-title" class="mw-page-title-main"><span class="mw-page-title-main">WebGPU Shading Language</span></span>

</h1>

</header>

/* start https://en.wikipedia.org/ */

.mw-parser-output .hatnote{font-style:italic}.mw-parser-output div.hatnote{padding-left:1.6em;margin-bottom:0.5em}.mw-parser-output .hatnote i{font-style:normal}.mw-parser-output .hatnote+link+.hatnote{margin-top:-0.5em}@media print{body.ns-0 .mw-parser-output .hatnote{display:none!important}}

/* end https://en.wikipedia.org/ */

</style><div role="note" class="hatnote navigation-not-searchable">Not to be confused with <a href="OpenGL_Shading_Language" title="OpenGL Shading Language">OpenGL Shading Language</a> or <a href="High-Level_Shader_Language" title="High-Level Shader Language">High-Level Shader Language</a>.</div>

/* start https://en.wikipedia.org/ */

.mw-parser-output .infobox-subbox{padding:0;border:none;margin:-3px;width:auto;min-width:100%;font-size:100%;clear:none;float:none;background-color:transparent}.mw-parser-output .infobox-3cols-child{margin:auto}.mw-parser-output .infobox .navbar{font-size:100%}@media screen{html.skin-theme-clientpref-night .mw-parser-output .infobox-full-data:not(.notheme)>div:not(.notheme)[style]{background:#1f1f23!important;color:#f8f9fa}}@media screen and (prefers-color-scheme:dark){html.skin-theme-clientpref-os .mw-parser-output .infobox-full-data:not(.notheme)>div:not(.notheme)[style]{background:#1f1f23!important;color:#f8f9fa}}@media(min-width:640px){body.skin--responsive .mw-parser-output .infobox-table{display:table!important}body.skin--responsive .mw-parser-output .infobox-table>caption{display:table-caption!important}body.skin--responsive .mw-parser-output .infobox-table>tbody{display:table-row-group}body.skin--responsive .mw-parser-output .infobox-table th,body.skin--responsive .mw-parser-output .infobox-table td{padding-left:inherit;padding-right:inherit}}

/* end https://en.wikipedia.org/ */

</style><table class="infobox hproduct"><caption class="infobox-title fn">WebGPU Shading Language (WGSL)</caption><tbody><tr><th scope="row" class="infobox-label">Latest version</th><td class="infobox-data">W3C Candidate Recommendation<br>(As of 2025)</td></tr><tr><th scope="row" class="infobox-label">Organization</th><td class="infobox-data"><style data-mw-deduplicate="TemplateStyles:r1126788409">

/* start https://en.wikipedia.org/ */

.mw-parser-output .plainlist ol,.mw-parser-output .plainlist ul{line-height:inherit;list-style:none;margin:0;padding:0}.mw-parser-output .plainlist ol li,.mw-parser-output .plainlist ul li{margin-bottom:0}

/* end https://en.wikipedia.org/ */

</style><div class="plainlist">

</div></td></tr><tr><th scope="row" class="infobox-label">Committee</th><td class="infobox-data"><div class="plainlist">

</div></td></tr><tr><th scope="row" class="infobox-label">Domain</th><td class="infobox-data"><div class="plainlist">

<ul><li><a href="Shading_language" title="Shading language">Shading language</a></li></ul>

</div></td></tr></tbody></table>

<p><b>WebGPU Shading Language</b> (<b>WGSL</b>, <a href="MIME" title="MIME">internet media type</a>: <code class="mw-highlight mw-highlight-lang-text mw-content-ltr" style="" dir="ltr">text/wgsl</code>) is a <a href="High-level_programming_language" title="High-level programming language">high-level</a> <a href="Shading_language" title="Shading language">shading language</a> and the normative shader language for the <a href="WebGPU" title="WebGPU">WebGPU</a> API on the web.<sup id="cite_ref-wgsl-spec_1-0" class="reference"><a href="#cite_note-wgsl-spec-1"><span class="cite-bracket">[</span>1<span class="cite-bracket">]</span></a></sup><sup id="cite_ref-webgpu-w3c_2-0" class="reference"><a href="#cite_note-webgpu-w3c-2"><span class="cite-bracket">[</span>2<span class="cite-bracket">]</span></a></sup> WGSL’s syntax is influenced by <a href="Rust_(programming_language)" title="Rust (programming language)">Rust</a> and is designed with strong static validation, explicit resource binding, and portability in mind for secure execution in browsers.<sup id="cite_ref-wgsl-spec_1-1" class="reference"><a href="#cite_note-wgsl-spec-1"><span class="cite-bracket">[</span>1<span class="cite-bracket">]</span></a></sup> In web contexts, WebGPU implementations accept WGSL source and perform compilation to platform-specific intermediate forms (for example, to SPIR‑V, DXIL, or MSL via the user agent), but such backends are not exposed to web content.<sup id="cite_ref-webgpu-w3c_2-1" class="reference"><a href="#cite_note-webgpu-w3c-2"><span class="cite-bracket">[</span>2<span class="cite-bracket">]</span></a></sup><sup id="cite_ref-mdn-wgsl_3-0" class="reference"><a href="#cite_note-mdn-wgsl-3"><span class="cite-bracket">[</span>3<span class="cite-bracket">]</span></a></sup>

</p>

<div class="mw-heading mw-heading2"><h2 id="History_and_background">History and background</h2></div>

<p>Graphics on the web historically used <a href="WebGL" title="WebGL">WebGL</a>, with shaders written in <a href="OpenGL_Shading_Language" title="OpenGL Shading Language">GLSL ES</a>. As applications demanded more modern GPU features and finer control over compute and graphics pipelines, the W3C’s GPU for the Web Community Group and Working Group created WebGPU and its companion shading language, WGSL, to provide a secure, portable model suitable for the web platform.<sup id="cite_ref-gpuweb-explainer_4-0" class="reference"><a href="#cite_note-gpuweb-explainer-4"><span class="cite-bracket">[</span>4<span class="cite-bracket">]</span></a></sup><sup id="cite_ref-webgpu-w3c_2-2" class="reference"><a href="#cite_note-webgpu-w3c-2"><span class="cite-bracket">[</span>2<span class="cite-bracket">]</span></a></sup> WGSL was developed to be human-readable, avoid undefined behavior common in legacy shading languages, and align closely with WebGPU’s resource and validation model.<sup id="cite_ref-wgsl-spec_1-2" class="reference"><a href="#cite_note-wgsl-spec-1"><span class="cite-bracket">[</span>1<span class="cite-bracket">]</span></a></sup>

</p>

<div class="mw-heading mw-heading2"><h2 id="Design_goals">Design goals</h2></div>

<p>WGSL’s design emphasizes:

</p>

<ul><li>Safety and determinism suitable for web security constraints (extensive static validation and well-defined semantics).<sup id="cite_ref-wgsl-spec_1-3" class="reference"><a href="#cite_note-wgsl-spec-1"><span class="cite-bracket">[</span>1<span class="cite-bracket">]</span></a></sup></li>

<li>Portability across diverse GPU backends via an abstract resource model shared with WebGPU.<sup id="cite_ref-webgpu-w3c_2-3" class="reference"><a href="#cite_note-webgpu-w3c-2"><span class="cite-bracket">[</span>2<span class="cite-bracket">]</span></a></sup></li>

<li>Readability and explicitness (no preprocessor, minimal implicit conversions, explicit address spaces and bindings).<sup id="cite_ref-wgsl-spec_1-4" class="reference"><a href="#cite_note-wgsl-spec-1"><span class="cite-bracket">[</span>1<span class="cite-bracket">]</span></a></sup></li>

<li>Alignment with modern GPU features (compute, storage buffers, textures, atomics) while retaining a familiar C/Rust-like syntax.<sup id="cite_ref-wgsl-spec_1-5" class="reference"><a href="#cite_note-wgsl-spec-1"><span class="cite-bracket">[</span>1<span class="cite-bracket">]</span></a></sup></li></ul>

<div class="mw-heading mw-heading2"><h2 id="Language_overview">Language overview</h2></div>

<div class="mw-heading mw-heading3"><h3 id="Types_and_values">Types and values</h3></div>

<p>Core scalar types include <code class="mw-highlight mw-highlight-lang-text mw-content-ltr" style="" dir="ltr">bool</code>, <code class="mw-highlight mw-highlight-lang-text mw-content-ltr" style="" dir="ltr">i32</code>, <code class="mw-highlight mw-highlight-lang-text mw-content-ltr" style="" dir="ltr">u32</code>, and <code class="mw-highlight mw-highlight-lang-text mw-content-ltr" style="" dir="ltr">f32</code>. Vectors (e.g., <code class="mw-highlight mw-highlight-lang-text mw-content-ltr" style="" dir="ltr">vec2</code>, <code class="mw-highlight mw-highlight-lang-text mw-content-ltr" style="" dir="ltr">vec3</code>, <code class="mw-highlight mw-highlight-lang-text mw-content-ltr" style="" dir="ltr">vec4</code>) and matrices (up to 4×4) are available for floating-point element types. Optional <code class="mw-highlight mw-highlight-lang-text mw-content-ltr" style="" dir="ltr">f16</code> (half precision) may be enabled via a WebGPU feature; availability is implementation-dependent.<sup id="cite_ref-wgsl-spec_1-6" class="reference"><a href="#cite_note-wgsl-spec-1"><span class="cite-bracket">[</span>1<span class="cite-bracket">]</span></a></sup><sup id="cite_ref-webgpu-w3c_2-4" class="reference"><a href="#cite_note-webgpu-w3c-2"><span class="cite-bracket">[</span>2<span class="cite-bracket">]</span></a></sup> Atomic types (<code class="mw-highlight mw-highlight-lang-text mw-content-ltr" style="" dir="ltr">atomic<i32></code>, <code class="mw-highlight mw-highlight-lang-text mw-content-ltr" style="" dir="ltr">atomic<u32></code>) support limited atomic operations in qualified address spaces.<sup id="cite_ref-wgsl-spec_1-7" class="reference"><a href="#cite_note-wgsl-spec-1"><span class="cite-bracket">[</span>1<span class="cite-bracket">]</span></a></sup>

</p>

<div class="mw-heading mw-heading3"><h3 id="Variables_and_address_spaces">Variables and address spaces</h3></div>

<p>Variables are declared with <code class="mw-highlight mw-highlight-lang-text mw-content-ltr" style="" dir="ltr">let</code> (immutable), <code class="mw-highlight mw-highlight-lang-text mw-content-ltr" style="" dir="ltr">var</code> (mutable), or <code class="mw-highlight mw-highlight-lang-text mw-content-ltr" style="" dir="ltr">const</code> (compile-time constant). Storage classes (address spaces) include <code class="mw-highlight mw-highlight-lang-text mw-content-ltr" style="" dir="ltr">function</code>, <code class="mw-highlight mw-highlight-lang-text mw-content-ltr" style="" dir="ltr">private</code>, <code class="mw-highlight mw-highlight-lang-text mw-content-ltr" style="" dir="ltr">workgroup</code>, <code class="mw-highlight mw-highlight-lang-text mw-content-ltr" style="" dir="ltr">uniform</code>, and <code class="mw-highlight mw-highlight-lang-text mw-content-ltr" style="" dir="ltr">storage</code> with <code class="mw-highlight mw-highlight-lang-text mw-content-ltr" style="" dir="ltr">read</code> or <code class="mw-highlight mw-highlight-lang-text mw-content-ltr" style="" dir="ltr">read_write</code> access as applicable.<sup id="cite_ref-wgsl-spec_1-8" class="reference"><a href="#cite_note-wgsl-spec-1"><span class="cite-bracket">[</span>1<span class="cite-bracket">]</span></a></sup> WGSL defines explicit layout and alignment rules; attributes such as <code class="mw-highlight mw-highlight-lang-text mw-content-ltr" style="" dir="ltr">@align</code>, <code class="mw-highlight mw-highlight-lang-text mw-content-ltr" style="" dir="ltr">@size</code>, and <code class="mw-highlight mw-highlight-lang-text mw-content-ltr" style="" dir="ltr">@stride</code> control data layout for buffer interoperability.<sup id="cite_ref-wgsl-spec_1-9" class="reference"><a href="#cite_note-wgsl-spec-1"><span class="cite-bracket">[</span>1<span class="cite-bracket">]</span></a></sup>

</p>

<div class="mw-heading mw-heading3"><h3 id="Functions_and_control_flow">Functions and control flow</h3></div>

<p>Functions use explicit parameter and return types. Control flow includes <code class="mw-highlight mw-highlight-lang-text mw-content-ltr" style="" dir="ltr">if</code>, <code class="mw-highlight mw-highlight-lang-text mw-content-ltr" style="" dir="ltr">switch</code>, <code class="mw-highlight mw-highlight-lang-text mw-content-ltr" style="" dir="ltr">for</code>, <code class="mw-highlight mw-highlight-lang-text mw-content-ltr" style="" dir="ltr">while</code>, and <code class="mw-highlight mw-highlight-lang-text mw-content-ltr" style="" dir="ltr">loop</code> constructs, with <code class="mw-highlight mw-highlight-lang-text mw-content-ltr" style="" dir="ltr">break</code>/<code class="mw-highlight mw-highlight-lang-text mw-content-ltr" style="" dir="ltr">continue</code>. Recursion is disallowed; entry-point call graphs must be acyclic.<sup id="cite_ref-wgsl-spec_1-10" class="reference"><a href="#cite_note-wgsl-spec-1"><span class="cite-bracket">[</span>1<span class="cite-bracket">]</span></a></sup>

</p>

<div class="mw-heading mw-heading3"><h3 id="Entry_points_and_attributes">Entry points and attributes</h3></div>

<p>Shaders define stage entry points with <code class="mw-highlight mw-highlight-lang-text mw-content-ltr" style="" dir="ltr">@vertex</code>, <code class="mw-highlight mw-highlight-lang-text mw-content-ltr" style="" dir="ltr">@fragment</code>, or <code class="mw-highlight mw-highlight-lang-text mw-content-ltr" style="" dir="ltr">@compute</code>. Attributes annotate bindings and interfaces, including <code class="mw-highlight mw-highlight-lang-text mw-content-ltr" style="" dir="ltr">@group</code>, <code class="mw-highlight mw-highlight-lang-text mw-content-ltr" style="" dir="ltr">@binding</code> (resource binding), <code class="mw-highlight mw-highlight-lang-text mw-content-ltr" style="" dir="ltr">@location</code> (user-defined I/O), <code class="mw-highlight mw-highlight-lang-text mw-content-ltr" style="" dir="ltr">@builtin</code> (stage built-ins such as <code class="mw-highlight mw-highlight-lang-text mw-content-ltr" style="" dir="ltr">position</code> or <code class="mw-highlight mw-highlight-lang-text mw-content-ltr" style="" dir="ltr">global_invocation_id</code>), <code class="mw-highlight mw-highlight-lang-text mw-content-ltr" style="" dir="ltr">@interpolate</code>, and <code class="mw-highlight mw-highlight-lang-text mw-content-ltr" style="" dir="ltr">@workgroup_size</code>.<sup id="cite_ref-wgsl-spec_1-11" class="reference"><a href="#cite_note-wgsl-spec-1"><span class="cite-bracket">[</span>1<span class="cite-bracket">]</span></a></sup>

</p>

<div class="mw-heading mw-heading3"><h3 id="Resources">Resources</h3></div>

<p>WGSL exposes buffers (<code class="mw-highlight mw-highlight-lang-text mw-content-ltr" style="" dir="ltr">uniform</code>, <code class="mw-highlight mw-highlight-lang-text mw-content-ltr" style="" dir="ltr">storage</code>), textures (sampled, storage, and multisampled variants), and samplers (filtering/non-filtering/comparison). The binding model is explicit via descriptor sets called groups and bindings, matching WebGPU’s pipeline layout model.<sup id="cite_ref-webgpu-w3c_2-5" class="reference"><a href="#cite_note-webgpu-w3c-2"><span class="cite-bracket">[</span>2<span class="cite-bracket">]</span></a></sup><sup id="cite_ref-wgsl-spec_1-12" class="reference"><a href="#cite_note-wgsl-spec-1"><span class="cite-bracket">[</span>1<span class="cite-bracket">]</span></a></sup>

</p>

<div class="mw-heading mw-heading2"><h2 id="Compilation_and_validation">Compilation and validation</h2></div>

<p>Browsers compile WGSL to platform-appropriate representations and native driver formats; the specific compilation pipeline is not observable by web content.<sup id="cite_ref-webgpu-w3c_2-6" class="reference"><a href="#cite_note-webgpu-w3c-2"><span class="cite-bracket">[</span>2<span class="cite-bracket">]</span></a></sup> WGSL source undergoes strict parsing and static validation, and WebGPU enforces robust resource access rules to avoid out-of-bounds memory hazards, contributing to predictable behavior across implementations.<sup id="cite_ref-webgpu-w3c_2-7" class="reference"><a href="#cite_note-webgpu-w3c-2"><span class="cite-bracket">[</span>2<span class="cite-bracket">]</span></a></sup><sup id="cite_ref-wgsl-spec_1-13" class="reference"><a href="#cite_note-wgsl-spec-1"><span class="cite-bracket">[</span>1<span class="cite-bracket">]</span></a></sup>

</p>

<div class="mw-heading mw-heading2"><h2 id="Shader_stages">Shader stages</h2></div>

<p>WGSL supports three pipeline stages: vertex, fragment, and compute.<sup id="cite_ref-wgsl-spec_1-14" class="reference"><a href="#cite_note-wgsl-spec-1"><span class="cite-bracket">[</span>1<span class="cite-bracket">]</span></a></sup>

</p>

<div class="mw-heading mw-heading3"><h3 id="Vertex_shaders">Vertex shaders</h3></div>

<p>Vertex shaders transform per-vertex inputs and produce values for rasterization, including a clip-space position written to the <code class="mw-highlight mw-highlight-lang-text mw-content-ltr" style="" dir="ltr">position</code> builtin.<sup id="cite_ref-wgsl-spec_1-15" class="reference"><a href="#cite_note-wgsl-spec-1"><span class="cite-bracket">[</span>1<span class="cite-bracket">]</span></a></sup>

</p>

<div class="mw-heading mw-heading4"><h4 id="Example">Example</h4></div>

<div class="mw-highlight mw-highlight-lang-wgsl mw-content-ltr" dir="ltr"><pre><span class="cm">/* Transforms positions by an MVP matrix and passes through color. */</span>

<span class="k">struct</span><span class="w"> </span><span class="n">VertexInput</span><span class="w"> </span><span class="p">{</span>

<span class="w"> </span><span class="nd">@location</span><span class="p">(</span><span class="mi">0</span><span class="p">)</span><span class="w"> </span><span class="nb">position</span><span class="w"> </span><span class="p">:</span><span class="w"> </span><span class="nb">vec3f</span><span class="p">,</span>

<span class="w"> </span><span class="nd">@location</span><span class="p">(</span><span class="mi">1</span><span class="p">)</span><span class="w"> </span><span class="n">color</span><span class="w"> </span><span class="p">:</span><span class="w"> </span><span class="nb">vec3f</span><span class="p">,</span>

<span class="k">struct</span><span class="w"> </span><span class="n">VertexOutput</span><span class="w"> </span><span class="p">{</span>

<span class="w"> </span><span class="nd">@builtin</span><span class="p">(</span><span class="nb">position</span><span class="p">)</span><span class="w"> </span><span class="n">clip_position</span><span class="w"> </span><span class="p">:</span><span class="w"> </span><span class="nb">vec4f</span><span class="p">,</span>

<span class="w"> </span><span class="nd">@location</span><span class="p">(</span><span class="mi">0</span><span class="p">)</span><span class="w"> </span><span class="n">color</span><span class="w"> </span><span class="p">:</span><span class="w"> </span><span class="nb">vec3f</span><span class="p">,</span>

<span class="nd">@group</span><span class="p">(</span><span class="mi">0</span><span class="p">)</span><span class="w"> </span><span class="nd">@binding</span><span class="p">(</span><span class="mi">0</span><span class="p">)</span>

<span class="kd">var</span><span class="o"><</span><span class="nb">uniform</span><span class="o">></span><span class="w"> </span><span class="n">mvp</span><span class="w"> </span><span class="p">:</span><span class="w"> </span><span class="nb">mat4x4f</span><span class="p">;</span>

<span class="nd">@vertex</span>

<span class="k">fn</span><span class="w"> </span><span class="n">main</span><span class="p">(</span><span class="n">v_in</span><span class="w"> </span><span class="p">:</span><span class="w"> </span><span class="n">VertexInput</span><span class="p">)</span><span class="w"> </span><span class="p">-></span><span class="w"> </span><span class="n">VertexOutput</span><span class="w"> </span><span class="p">{</span>

<span class="w"> </span><span class="kd">var</span><span class="w"> </span><span class="n">v_out</span><span class="w"> </span><span class="p">:</span><span class="w"> </span><span class="n">VertexOutput</span><span class="p">;</span>

<span class="w"> </span><span class="n">v_out</span><span class="p">.</span><span class="n">clip_position</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="n">mvp</span><span class="w"> </span><span class="o">*</span><span class="w"> </span><span class="nb">vec4f</span><span class="p">(</span><span class="n">v_in</span><span class="p">.</span><span class="nb">position</span><span class="p">,</span><span class="w"> </span><span class="mf">1.0</span><span class="p">);</span>

<span class="w"> </span><span class="n">v_out</span><span class="p">.</span><span class="n">color</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="n">v_in</span><span class="p">.</span><span class="n">color</span><span class="p">;</span>

<span class="w"> </span><span class="k">return</span><span class="w"> </span><span class="n">v_out</span><span class="p">;</span>

</pre></div>

<div class="mw-heading mw-heading3"><h3 id="Fragment_shaders">Fragment shaders</h3></div>

<p>Fragment shaders run per-fragment and compute color (and optionally depth) outputs written to color attachments.<sup id="cite_ref-wgsl-spec_1-16" class="reference"><a href="#cite_note-wgsl-spec-1"><span class="cite-bracket">[</span>1<span class="cite-bracket">]</span></a></sup>

</p>

<div class="mw-heading mw-heading4"><h4 id="Example_2">Example</h4></div>

<div class="mw-highlight mw-highlight-lang-wgsl mw-content-ltr" dir="ltr"><pre><span class="cm">/* Writes an interpolated color with opaque alpha. */</span>

<span class="nd">@fragment</span>

<span class="k">fn</span><span class="w"> </span><span class="n">main</span><span class="p">(</span><span class="nd">@location</span><span class="p">(</span><span class="mi">0</span><span class="p">)</span><span class="w"> </span><span class="n">color</span><span class="w"> </span><span class="p">:</span><span class="w"> </span><span class="nb">vec3f</span><span class="p">)</span><span class="w"> </span><span class="p">-></span><span class="w"> </span><span class="nd">@location</span><span class="p">(</span><span class="mi">0</span><span class="p">)</span><span class="w"> </span><span class="nb">vec4f</span><span class="w"> </span><span class="p">{</span>

<span class="w"> </span><span class="k">return</span><span class="w"> </span><span class="nb">vec4f</span><span class="p">(</span><span class="n">color</span><span class="p">,</span><span class="w"> </span><span class="mf">1.0</span><span class="p">);</span>

</pre></div>

<div class="mw-heading mw-heading3"><h3 id="Compute_shaders">Compute shaders</h3></div>

<p>Compute shaders run in workgroups and are used for general-purpose GPU computations.<sup id="cite_ref-wgsl-spec_1-17" class="reference"><a href="#cite_note-wgsl-spec-1"><span class="cite-bracket">[</span>1<span class="cite-bracket">]</span></a></sup>

</p>

<div class="mw-heading mw-heading4"><h4 id="Example_3">Example</h4></div>

<div class="mw-highlight mw-highlight-lang-wgsl mw-content-ltr" dir="ltr"><pre><span class="cm">/* Doubles elements from an input buffer into an output buffer. */</span>

<span class="k">struct</span><span class="w"> </span><span class="n">Params</span><span class="w"> </span><span class="p">{</span>

<span class="w"> </span><span class="n">element_count</span><span class="w"> </span><span class="p">:</span><span class="w"> </span><span class="nb">u32</span><span class="p">,</span>

<span class="kd">var</span><span class="o"><</span><span class="nb">storage</span><span class="p">,</span><span class="w"> </span><span class="nb">read</span><span class="o">></span><span class="w"> </span><span class="n">in_data</span><span class="w"> </span><span class="p">:</span><span class="w"> </span><span class="nb">array</span><span class="o"><</span><span class="nb">f32</span><span class="o">></span><span class="p">;</span>

<span class="kd">var</span><span class="o"><</span><span class="nb">storage</span><span class="p">,</span><span class="w"> </span><span class="nb">read_write</span><span class="o">></span><span class="w"> </span><span class="n">out_data</span><span class="w"> </span><span class="p">:</span><span class="w"> </span><span class="nb">array</span><span class="o"><</span><span class="nb">f32</span><span class="o">></span><span class="p">;</span>

<span class="kd">var</span><span class="o"><</span><span class="nb">uniform</span><span class="o">></span><span class="w"> </span><span class="n">params</span><span class="w"> </span><span class="p">:</span><span class="w"> </span><span class="n">Params</span><span class="p">;</span>

<span class="nd">@compute</span><span class="w"> </span><span class="nd">@workgroup_size</span><span class="p">(</span><span class="mi">64</span><span class="p">)</span>

<span class="k">fn</span><span class="w"> </span><span class="n">main</span><span class="p">(</span><span class="nd">@builtin</span><span class="p">(</span><span class="nb">global_invocation_id</span><span class="p">)</span><span class="w"> </span><span class="n">gid</span><span class="w"> </span><span class="p">:</span><span class="w"> </span><span class="nb">vec3</span><span class="o"><</span><span class="nb">u32</span><span class="o">></span><span class="p">)</span><span class="w"> </span><span class="p">{</span>

<span class="w"> </span><span class="k">if</span><span class="w"> </span><span class="p">(</span><span class="n">idx</span><span class="w"> </span><span class="o">>=</span><span class="w"> </span><span class="n">params</span><span class="p">.</span><span class="n">element_count</span><span class="p">)</span><span class="w"> </span><span class="p">{</span><span class="w"> </span><span class="k">return</span><span class="p">;</span><span class="w"> </span><span class="p">}</span>

</pre></div>

<div class="mw-heading mw-heading2"><h2 id="Differences_from_GLSL_and_HLSL">Differences from GLSL and HLSL</h2></div>

<p>Compared with legacy shading languages, WGSL:

</p>

<ul><li>Omits a preprocessor and requires explicit types and conversions.<sup id="cite_ref-wgsl-spec_1-18" class="reference"><a href="#cite_note-wgsl-spec-1"><span class="cite-bracket">[</span>1<span class="cite-bracket">]</span></a></sup></li>

<li>Uses explicit address spaces and binding annotations aligned with WebGPU’s model.<sup id="cite_ref-webgpu-w3c_2-8" class="reference"><a href="#cite_note-webgpu-w3c-2"><span class="cite-bracket">[</span>2<span class="cite-bracket">]</span></a></sup></li>

<li>Enforces strict validation to avoid undefined behavior common in other shading languages.<sup id="cite_ref-wgsl-spec_1-19" class="reference"><a href="#cite_note-wgsl-spec-1"><span class="cite-bracket">[</span>1<span class="cite-bracket">]</span></a></sup></li>

<li>Defines a portable, web-focused feature set; 16-bit types and other features are opt-in and may depend on device capabilities.<sup id="cite_ref-webgpu-w3c_2-9" class="reference"><a href="#cite_note-webgpu-w3c-2"><span class="cite-bracket">[</span>2<span class="cite-bracket">]</span></a></sup></li></ul>

<ul><li><a href="WebGPU" title="WebGPU">WebGPU</a></li>

<div class="mw-heading mw-heading3"><h3 id="Other_shading_languages">Other shading languages</h3></div>

<ul><li><a href="OpenGL_Shading_Language" title="OpenGL Shading Language">GLSL</a>, shading language for OpenGL</li>

<li><a href="High-Level_Shader_Language" title="High-Level Shader Language">HLSL</a>, Microsoft's shading language for Direct3D</li>

<li><a href="Metal_Shading_Language" class="mw-redirect" title="Metal Shading Language">Metal Shading Language</a>, Apple's shading language for Metal</li>

<li><a href="Cg_(programming_language)" title="Cg (programming language)">Cg</a>, NVIDIA's C-based shading language</li>

<li><a href="Open_Shading_Language" title="Open Shading Language">Open Shading Language</a>, offline rendering shading language</li></ul>

<div class="mw-heading mw-heading2"><h2 id="References">References</h2></div>

/* start https://en.wikipedia.org/ */

.mw-parser-output .reflist{margin-bottom:0.5em;list-style-type:decimal}@media screen{.mw-parser-output .reflist{font-size:90%}}.mw-parser-output .reflist .references{font-size:100%;margin-bottom:0;list-style-type:inherit}.mw-parser-output .reflist-columns-2{column-width:30em}.mw-parser-output .reflist-columns-3{column-width:25em}.mw-parser-output .reflist-columns{margin-top:0.3em}.mw-parser-output .reflist-columns ol{margin-top:0}.mw-parser-output .reflist-columns li{page-break-inside:avoid;break-inside:avoid-column}.mw-parser-output .reflist-upper-alpha{list-style-type:upper-alpha}.mw-parser-output .reflist-upper-roman{list-style-type:upper-roman}.mw-parser-output .reflist-lower-alpha{list-style-type:lower-alpha}.mw-parser-output .reflist-lower-greek{list-style-type:lower-greek}.mw-parser-output .reflist-lower-roman{list-style-type:lower-roman}

/* end https://en.wikipedia.org/ */

</style><div class="reflist">

/* start https://en.wikipedia.org/ */

.mw-parser-output cite.citation{font-style:inherit;word-wrap:break-word}.mw-parser-output .citation q{quotes:"\"""\"""'""'"}.mw-parser-output .citation:target{background-color:rgba(0,127,255,0.133)}.mw-parser-output .id-lock-free.id-lock-free a{background:url("./mw/Lock-green.svg")right 0.1em center/9px no-repeat}.mw-parser-output .id-lock-limited.id-lock-limited a,.mw-parser-output .id-lock-registration.id-lock-registration a{background:url("./mw/Lock-gray-alt-2.svg")right 0.1em center/9px no-repeat}.mw-parser-output .id-lock-subscription.id-lock-subscription a{background:url("./mw/Lock-red-alt-2.svg")right 0.1em center/9px no-repeat}.mw-parser-output .cs1-ws-icon a{background:url("./mw/Wikisource-logo.svg")right 0.1em center/12px no-repeat}body:not(.skin-timeless):not(.skin-minerva) .mw-parser-output .id-lock-free a,body:not(.skin-timeless):not(.skin-minerva) .mw-parser-output .id-lock-limited a,body:not(.skin-timeless):not(.skin-minerva) .mw-parser-output .id-lock-registration a,body:not(.skin-timeless):not(.skin-minerva) .mw-parser-output .id-lock-subscription a,body:not(.skin-timeless):not(.skin-minerva) .mw-parser-output .cs1-ws-icon a{background-size:contain;padding:0 1em 0 0}.mw-parser-output .cs1-code{color:inherit;background:inherit;border:none;padding:inherit}.mw-parser-output .cs1-hidden-error{display:none;color:var(--color-error,#d33)}.mw-parser-output .cs1-visible-error{color:var(--color-error,#d33)}.mw-parser-output .cs1-maint{display:none;color:#085;margin-left:0.3em}.mw-parser-output .cs1-kern-left{padding-left:0.2em}.mw-parser-output .cs1-kern-right{padding-right:0.2em}.mw-parser-output .citation .mw-selflink{font-weight:inherit}@media screen{.mw-parser-output .cs1-format{font-size:95%}html.skin-theme-clientpref-night .mw-parser-output .cs1-maint{color:#18911f}}@media screen and (prefers-color-scheme:dark){html.skin-theme-clientpref-os .mw-parser-output .cs1-maint{color:#18911f}}

/* end https://en.wikipedia.org/ */

</style><cite class="citation web cs1"><a rel="nofollow" class="external text" href="https://www.w3.org/TR/WGSL/">"WebGPU Shading Language (WGSL)"</a>. W3C<span class="reference-accessdate">. Retrieved <span class="nowrap">2025-08-07</span></span>.</cite></span>

</li>

<li id="cite_note-webgpu-w3c-2"><span class="mw-cite-backlink">^ <a href="#cite_ref-webgpu-w3c_2-0"><sup><i><b>a</b></i></sup></a> <a href="#cite_ref-webgpu-w3c_2-1"><sup><i><b>b</b></i></sup></a> <a href="#cite_ref-webgpu-w3c_2-2"><sup><i><b>c</b></i></sup></a> <a href="#cite_ref-webgpu-w3c_2-3"><sup><i><b>d</b></i></sup></a> <a href="#cite_ref-webgpu-w3c_2-4"><sup><i><b>e</b></i></sup></a> <a href="#cite_ref-webgpu-w3c_2-5"><sup><i><b>f</b></i></sup></a> <a href="#cite_ref-webgpu-w3c_2-6"><sup><i><b>g</b></i></sup></a> <a href="#cite_ref-webgpu-w3c_2-7"><sup><i><b>h</b></i></sup></a> <a href="#cite_ref-webgpu-w3c_2-8"><sup><i><b>i</b></i></sup></a> <a href="#cite_ref-webgpu-w3c_2-9"><sup><i><b>j</b></i></sup></a></span> <span class="reference-text"><cite class="citation web cs1"><a rel="nofollow" class="external text" href="https://www.w3.org/TR/webgpu/">"WebGPU"</a>. W3C<span class="reference-accessdate">. Retrieved <span class="nowrap">2025-08-07</span></span>.</cite></span>

</li>

<li id="cite_note-mdn-wgsl-3"><span class="mw-cite-backlink"><b><a href="#cite_ref-mdn-wgsl_3-0">^</a></b></span> <span class="reference-text"><cite class="citation web cs1"><a rel="nofollow" class="external text" href="https://developer.mozilla.org/en-US/docs/Web/API/WebGPU_API/WGSL">"WGSL (WebGPU Shading Language)"</a>. <i>MDN Web Docs</i><span class="reference-accessdate">. Retrieved <span class="nowrap">2025-08-07</span></span>.</cite></span>

</li>

<li id="cite_note-gpuweb-explainer-4"><span class="mw-cite-backlink"><b><a href="#cite_ref-gpuweb-explainer_4-0">^</a></b></span> <span class="reference-text"><cite class="citation web cs1"><a rel="nofollow" class="external text" href="https://gpuweb.github.io/gpuweb/explainer/">"WebGPU Explainer"</a>. W3C GPU for the Web Community Group<span class="reference-accessdate">. Retrieved <span class="nowrap">2025-08-07</span></span>.</cite></span>

</li>

</ol></div></div>

<div class="mw-heading mw-heading2"><h2 id="External_links">External links</h2></div>

<ul><li><a rel="nofollow" class="external text" href="https://www.w3.org/TR/WGSL/">WebGPU Shading Language Specification</a> – Official W3C specification</li>

<li><a rel="nofollow" class="external text" href="https://www.w3.org/TR/webgpu/">WebGPU Specification</a> – WebGPU API specification</li>

<li><a rel="nofollow" class="external text" href="https://github.com/gpuweb/gpuweb/tree/main/wgsl">WGSL in the GPU for the Web repository</a> – Development directory of the WGSL specification</li>

<li><a rel="nofollow" class="external text" href="https://developer.mozilla.org/en-US/docs/Web/API/WebGPU_API/WGSL">MDN: WGSL (WebGPU Shading Language)</a></li></ul>

/* start https://en.wikipedia.org/ */

.mw-parser-output .hlist dl,.mw-parser-output .hlist ol,.mw-parser-output .hlist ul{margin:0;padding:0}.mw-parser-output .hlist dd,.mw-parser-output .hlist dt,.mw-parser-output .hlist li{margin:0;display:inline}.mw-parser-output .hlist.inline,.mw-parser-output .hlist.inline dl,.mw-parser-output .hlist.inline ol,.mw-parser-output .hlist.inline ul,.mw-parser-output .hlist dl dl,.mw-parser-output .hlist dl ol,.mw-parser-output .hlist dl ul,.mw-parser-output .hlist ol dl,.mw-parser-output .hlist ol ol,.mw-parser-output .hlist ol ul,.mw-parser-output .hlist ul dl,.mw-parser-output .hlist ul ol,.mw-parser-output .hlist ul ul{display:inline}.mw-parser-output .hlist .mw-empty-li{display:none}.mw-parser-output .hlist dt::after{content:": "}.mw-parser-output .hlist dd::after,.mw-parser-output .hlist li::after{content:" · ";font-weight:bold}.mw-parser-output .hlist dd:last-child::after,.mw-parser-output .hlist dt:last-child::after,.mw-parser-output .hlist li:last-child::after{content:none}.mw-parser-output .hlist dd dd:first-child::before,.mw-parser-output .hlist dd dt:first-child::before,.mw-parser-output .hlist dd li:first-child::before,.mw-parser-output .hlist dt dd:first-child::before,.mw-parser-output .hlist dt dt:first-child::before,.mw-parser-output .hlist dt li:first-child::before,.mw-parser-output .hlist li dd:first-child::before,.mw-parser-output .hlist li dt:first-child::before,.mw-parser-output .hlist li li:first-child::before{content:" (";font-weight:normal}.mw-parser-output .hlist dd dd:last-child::after,.mw-parser-output .hlist dd dt:last-child::after,.mw-parser-output .hlist dd li:last-child::after,.mw-parser-output .hlist dt dd:last-child::after,.mw-parser-output .hlist dt dt:last-child::after,.mw-parser-output .hlist dt li:last-child::after,.mw-parser-output .hlist li dd:last-child::after,.mw-parser-output .hlist li dt:last-child::after,.mw-parser-output .hlist li li:last-child::after{content:")";font-weight:normal}.mw-parser-output .hlist ol{counter-reset:listitem}.mw-parser-output .hlist ol>li{counter-increment:listitem}.mw-parser-output .hlist ol>li::before{content:" "counter(listitem)"\a0 "}.mw-parser-output .hlist dd ol>li:first-child::before,.mw-parser-output .hlist dt ol>li:first-child::before,.mw-parser-output .hlist li ol>li:first-child::before{content:" ("counter(listitem)"\a0 "}

/* end https://en.wikipedia.org/ */

</style><style data-mw-deduplicate="TemplateStyles:r1236075235">

/* start https://en.wikipedia.org/ */

.mw-parser-output .navbox{box-sizing:border-box;border:1px solid #a2a9b1;width:100%;clear:both;font-size:88%;text-align:center;padding:1px;margin:1em auto 0}.mw-parser-output .navbox .navbox{margin-top:0}.mw-parser-output .navbox+.navbox,.mw-parser-output .navbox+.navbox-styles+.navbox{margin-top:-1px}.mw-parser-output .navbox-inner,.mw-parser-output .navbox-subgroup{width:100%}.mw-parser-output .navbox-group,.mw-parser-output .navbox-title,.mw-parser-output .navbox-abovebelow{padding:0.25em 1em;line-height:1.5em;text-align:center}.mw-parser-output .navbox-group{white-space:nowrap;text-align:right}.mw-parser-output .navbox,.mw-parser-output .navbox-subgroup{background-color:#fdfdfd}.mw-parser-output .navbox-list{line-height:1.5em;border-color:#fdfdfd}.mw-parser-output .navbox-list-with-group{text-align:left;border-left-width:2px;border-left-style:solid}.mw-parser-output tr+tr>.navbox-abovebelow,.mw-parser-output tr+tr>.navbox-group,.mw-parser-output tr+tr>.navbox-image,.mw-parser-output tr+tr>.navbox-list{border-top:2px solid #fdfdfd}.mw-parser-output .navbox-title{background-color:#ccf}.mw-parser-output .navbox-abovebelow,.mw-parser-output .navbox-group,.mw-parser-output .navbox-subgroup .navbox-title{background-color:#ddf}.mw-parser-output .navbox-subgroup .navbox-group,.mw-parser-output .navbox-subgroup .navbox-abovebelow{background-color:#e6e6ff}.mw-parser-output .navbox-even{background-color:#f7f7f7}.mw-parser-output .navbox-odd{background-color:transparent}.mw-parser-output .navbox .hlist td dl,.mw-parser-output .navbox .hlist td ol,.mw-parser-output .navbox .hlist td ul,.mw-parser-output .navbox td.hlist dl,.mw-parser-output .navbox td.hlist ol,.mw-parser-output .navbox td.hlist ul{padding:0.125em 0}.mw-parser-output .navbox .navbar{display:block;font-size:100%}.mw-parser-output .navbox-title .navbar{float:left;text-align:left;margin-right:0.5em}body.skin--responsive .mw-parser-output .navbox-image img{max-width:none!important}@media print{body.ns-0 .mw-parser-output .navbox{display:none!important}}

/* end https://en.wikipedia.org/ */

</style></div><div role="navigation" class="navbox" aria-labelledby="World_Wide_Web_Consortium_(W3C)102" style="padding:3px"><table class="nowraplinks mw-collapsible autocollapse navbox-inner" style="border-spacing:0;background:transparent;color:inherit"><tbody><tr><th scope="col" class="navbox-title" colspan="2"><style data-mw-deduplicate="TemplateStyles:r1239400231">

/* start https://en.wikipedia.org/ */

.mw-parser-output .navbar{display:inline;font-size:88%;font-weight:normal}.mw-parser-output .navbar-collapse{float:left;text-align:left}.mw-parser-output .navbar-boxtext{word-spacing:0}.mw-parser-output .navbar ul{display:inline-block;white-space:nowrap;line-height:inherit}.mw-parser-output .navbar-brackets::before{margin-right:-0.125em;content:"[ "}.mw-parser-output .navbar-brackets::after{margin-left:-0.125em;content:" ]"}.mw-parser-output .navbar li{word-spacing:-0.125em}.mw-parser-output .navbar a>span,.mw-parser-output .navbar a>abbr{text-decoration:inherit}.mw-parser-output .navbar-mini abbr{font-variant:small-caps;border-bottom:none;text-decoration:none;cursor:inherit}.mw-parser-output .navbar-ct-full{font-size:114%;margin:0 7em}.mw-parser-output .navbar-ct-mini{font-size:114%;margin:0 4em}html.skin-theme-clientpref-night .mw-parser-output .navbar li a abbr{color:var(--color-base)!important}@media(prefers-color-scheme:dark){html.skin-theme-clientpref-os .mw-parser-output .navbar li a abbr{color:var(--color-base)!important}}@media print{.mw-parser-output .navbar{display:none!important}}

/* end https://en.wikipedia.org/ */

</style><div id="World_Wide_Web_Consortium_(W3C)102" style="font-size:114%;margin:0 4em"><a href="World_Wide_Web_Consortium" title="World Wide Web Consortium">World Wide Web Consortium</a> (W3C)</div></th></tr><tr><th scope="row" class="navbox-group" style="width:1%">Products,<br>standards</th><td class="navbox-list-with-group navbox-list navbox-odd hlist" style="width:100%;padding:0"><div style="padding:0 0.25em"></div><table class="nowraplinks navbox-subgroup" style="border-spacing:0"><tbody><tr><th scope="row" class="navbox-group" style="width:1%"><a href="World_Wide_Web_Consortium#W3C_recommendation_(REC)" title="World Wide Web Consortium">Recommendations</a></th><td class="navbox-list-with-group navbox-list navbox-odd" style="width:100%;padding:0"><div style="padding:0 0.25em">

<ul><li><a href="ActivityPub" title="ActivityPub">ActivityPub</a></li>

<li><a href="Activity_Streams_(format)" title="Activity Streams (format)">Activity Streams</a></li>

<li><a href="Canonical_XML" title="Canonical XML">Canonical XML</a></li>

<ul><li><a href="CSS_animations" title="CSS animations">Animations</a></li>

<li><a href="Flexbox" title="Flexbox">Flexbox</a></li>

<li><a href="Emotion_Markup_Language" title="Emotion Markup Language">EmotionML</a></li>

<li><a href="W3C_Geolocation_API" title="W3C Geolocation API">Geolocation API</a></li>

<li><a href="Indexed_Database_API" title="Indexed Database API">IndexedDB</a></li>

<li><a href="Linked_Data_Notifications" title="Linked Data Notifications">Linked Data Notifications</a></li>

<li><a href="MathML" title="MathML">MathML</a></li>

<li><a href="Micropub_(protocol)" title="Micropub (protocol)">Micropub</a></li>

<ul><li><a href="RDF_Schema" title="RDF Schema">Schema</a></li>

<ul><li><a href="SVG_filter_effects" title="SVG filter effects">Filter Effects</a></li></ul></li>

<li><a href="SCXML" title="SCXML">SCXML</a></li>

<li><a href="SHACL" title="SHACL">SHACL</a></li>

<li><a href="SPARQL" title="SPARQL">SPARQL</a></li>

<li><a href="Timed_text" title="Timed text">Timed text</a></li>

<li><a href="VoiceXML" title="VoiceXML">VoiceXML</a></li>

<li><a href="WebAssembly" title="WebAssembly">WebAssembly</a></li>

<li><a href="Web_storage" title="Web storage">Web storage</a></li>

<li><a href="Webmention" title="Webmention">Webmention</a></li>

<li><a href="WebSub" title="WebSub">WebSub</a></li>

<li><a href="WebVTT" title="WebVTT">WebVTT</a></li>

<li><a href="XHTML" title="XHTML">XHTML</a>

<li><a href="XML_Encryption" title="XML Encryption">Encryption</a></li>

<li><a href="XML_Events" title="XML Events">Events</a></li>

<li><a href="XML_Information_Set" title="XML Information Set">Information Set</a></li>

<li><a href="XML_namespace" title="XML namespace">Namespace</a></li>

<li><a href="XML_Schema_(W3C)" title="XML Schema (W3C)">Schema</a></li>

<li><a href="XML_Signature" title="XML Signature">Signature</a></li>

<li><a href="XForms" title="XForms">XForms</a></li>

<li><a href="XInclude" title="XInclude">XInclude</a></li>

<li><a href="XLink" title="XLink">XLink</a></li>

<li><a href="XPath" title="XPath">XPath</a>

<li><a href="XPointer" title="XPointer">XPointer</a></li>

<li><a href="XProc" title="XProc">XProc</a></li>

<li><a href="XQuery" title="XQuery">XQuery</a></li>

<ul><li><a href="XSLT_elements" title="XSLT elements">elements</a></li></ul></li></ul></li></ul>

</div></td></tr><tr><th scope="row" class="navbox-group" style="width:1%">Notes</th><td class="navbox-list-with-group navbox-list navbox-even" style="width:100%;padding:0"><div style="padding:0 0.25em">

<ul><li><a href="IndieAuth" title="IndieAuth">IndieAuth</a></li>

<li><a href="XAdES" title="XAdES">XAdES</a></li>

<li><a href="XHTML%2BSMIL" title="XHTML+SMIL">XHTML+SMIL</a></li>

</div></td></tr><tr><th scope="row" class="navbox-group" style="width:1%"><a href="World_Wide_Web_Consortium#Working_draft_(WD)" title="World Wide Web Consortium">Working drafts</a></th><td class="navbox-list-with-group navbox-list navbox-odd" style="width:100%;padding:0"><div style="padding:0 0.25em">

<ul><li><a href="Call_Control_eXtensible_Markup_Language" title="Call Control eXtensible Markup Language">CCXML</a></li>

<li><a href="CURIE" title="CURIE">CURIE</a></li>

<li><a href="InkML" title="InkML">InkML</a></li>

<li><a href="SMIL_Timesheets" title="SMIL Timesheets">SMIL Timesheets</a></li>

<li><a href="WebGPU" title="WebGPU">WebGPU</a></li>

<li><a href="WebXR" title="WebXR">WebXR</a></li>

<li><a href="XFrames" title="XFrames">XFrames</a></li>

<li><a href="XMLHttpRequest" title="XMLHttpRequest">XMLHttpRequest</a></li></ul>

</div></td></tr><tr><th scope="row" class="navbox-group" style="width:1%">Guidelines</th><td class="navbox-list-with-group navbox-list navbox-even" style="width:100%;padding:0"><div style="padding:0 0.25em">

<ul><li><a href="Web_Content_Accessibility_Guidelines" title="Web Content Accessibility Guidelines">Web Content Accessibility Guidelines</a></li></ul>

</div></td></tr><tr><th scope="row" class="navbox-group" style="width:1%">Initiative</th><td class="navbox-list-with-group navbox-list navbox-odd" style="width:100%;padding:0"><div style="padding:0 0.25em">

<ul><li><a href="W3C_Markup_Validation_Service" title="W3C Markup Validation Service">Markup Validation Service</a></li>

<li><a href="Web_Accessibility_Initiative" title="Web Accessibility Initiative">Web Accessibility Initiative</a></li>

<li><a href="Web_Components" title="Web Components">Web Components</a></li></ul>

</div></td></tr><tr><th scope="row" class="navbox-group" style="width:1%">Deprecated</th><td class="navbox-list-with-group navbox-list navbox-even" style="width:100%;padding:0"><div style="padding:0 0.25em">

<li><a href="WebPlatform.org" title="WebPlatform.org">WebPlatform</a></li></ul>

</div></td></tr><tr><th scope="row" class="navbox-group" style="width:1%">Obsoleted</th><td class="navbox-list-with-group navbox-list navbox-odd" style="width:100%;padding:0"><div style="padding:0 0.25em">

<li><a href="XHTML%2BMathML%2BSVG" title="XHTML+MathML+SVG">XHTML+MathML+SVG</a></li></ul>

</div></td></tr></tbody></table><div></div></td></tr><tr><th scope="row" class="navbox-group" style="width:1%">Groups,<br>organizations</th><td class="navbox-list-with-group navbox-list navbox-odd hlist" style="width:100%;padding:0"><div style="padding:0 0.25em"></div><table class="nowraplinks navbox-subgroup" style="border-spacing:0"><tbody><tr><td colspan="2" class="navbox-list navbox-even" style="width:100%;padding:0"><div style="padding:0 0.25em">

<ul><li><a href="WHATWG" title="WHATWG">WHATWG</a></li>

<li>Defunct: <a href="World_Wide_Web_Foundation" title="World Wide Web Foundation">World Wide Web Foundation</a></li></ul>

</div></td></tr><tr><th scope="row" class="navbox-group" style="width:1%">Elected</th><td class="navbox-list-with-group navbox-list navbox-odd" style="width:100%;padding:0"><div style="padding:0 0.25em">

<li>Board</li>

</div></td></tr><tr><th scope="row" class="navbox-group" style="width:1%">Working</th><td class="navbox-list-with-group navbox-list navbox-even" style="width:100%;padding:0"><div style="padding:0 0.25em">

<li><a href="WebAssembly" title="WebAssembly">WebAssembly</a></li>

<li><a href="Web_Authentication_Working_Group" title="Web Authentication Working Group">WebAuthn</a></li></ul>

</div></td></tr><tr><th scope="row" class="navbox-group" style="width:1%">Community, business</th><td class="navbox-list-with-group navbox-list navbox-odd" style="width:100%;padding:0"><div style="padding:0 0.25em">

<ul><li><a href="Improving_Web_Advertising_Business_Group" title="Improving Web Advertising Business Group">Web Advertising BG</a></li>

<li><a href="WebAssembly" title="WebAssembly">WebAssembly</a> CG</li></ul>

</div></td></tr><tr><th scope="row" class="navbox-group" style="width:1%">Closed</th><td class="navbox-list-with-group navbox-list navbox-even" style="width:100%;padding:0"><div style="padding:0 0.25em">

<ul><li><a href="W3C_Device_Description_Working_Group" title="W3C Device Description Working Group">Device Description</a> (DDWG)</li>

<li><a href="W3C_MMI" title="W3C MMI">Multimodal Interaction Activity</a> (MMI)</li></ul>

</div></td></tr></tbody></table><div></div></td></tr><tr><th scope="row" class="navbox-group" style="width:1%">Software</th><td class="navbox-list-with-group navbox-list navbox-odd hlist" style="width:100%;padding:0"><div style="padding:0 0.25em"></div><table class="nowraplinks navbox-subgroup" style="border-spacing:0"><tbody><tr><td colspan="2" class="navbox-list navbox-odd" style="width:100%;padding:0"><div style="padding:0 0.25em">

<ul><li><a href="CERN_httpd" title="CERN httpd">CERN httpd</a></li>

<li><a href="Libwww" title="Libwww">Libwww</a></li></ul>

</div></td></tr><tr><th scope="row" class="navbox-group" style="width:1%"><a href="Web_browser" title="Web browser">Browsers</a></th><td class="navbox-list-with-group navbox-list navbox-even" style="width:100%;padding:0"><div style="padding:0 0.25em">

<li><a href="Arena_(web_browser)" title="Arena (web browser)">Arena</a> (1993–98)</li>

<li><a href="Agora_(web_browser)" title="Agora (web browser)">Agora</a> (1994–97)</li>

<li><a href="Amaya_(web_editor)" title="Amaya (web editor)">Amaya</a> (browser/editor, 1996–2012)</li></ul>

</div></td></tr></tbody></table><div></div></td></tr><tr><th scope="row" class="navbox-group" style="width:1%">Conferences</th><td class="navbox-list-with-group navbox-list navbox-odd hlist" style="width:100%;padding:0"><div style="padding:0 0.25em">

<ul><li><a href="The_Web_Conference" title="The Web Conference">International World Wide Web Conference</a> (IW3C)

<ul><li><a href="International_World_Wide_Web_Conference_Committee" title="International World Wide Web Conference Committee">Steering Committee</a> (IW3C2)</li>

<li><a href="First_International_Conference_on_the_World-Wide_Web" title="First International Conference on the World-Wide Web">First conference</a> ("WWW1", 1994)</li></ul></li></ul>

</div></td></tr></tbody></table></div>

<div class="navbox-styles"></div><div role="navigation" class="navbox" aria-labelledby="Computer_graphics188" style="padding:3px"><table class="nowraplinks mw-collapsible mw-collapsed navbox-inner" style="border-spacing:0;background:transparent;color:inherit"><tbody><tr><th scope="col" class="navbox-title" colspan="2"><div id="Computer_graphics188" style="font-size:114%;margin:0 4em"><a href="Computer_graphics_(computer_science)" title="Computer graphics (computer science)">Computer graphics</a></div></th></tr><tr><th scope="row" class="navbox-group" style="width:1%"><a href="Vector_graphics" title="Vector graphics">Vector graphics</a></th><td class="navbox-list-with-group navbox-list navbox-odd hlist" style="width:100%;padding:0"><div style="padding:0 0.25em">

<ul><li><a href="Diffusion_curve" title="Diffusion curve">Diffusion curve</a></li>

<li><a href="Pixel" title="Pixel">Pixel</a></li></ul>

</div></td></tr><tr><th scope="row" class="navbox-group" style="width:1%"><a href="2D_computer_graphics" title="2D computer graphics">2D graphics</a></th><td class="navbox-list-with-group navbox-list navbox-even hlist" style="width:100%;padding:0"><div style="padding:0 0.25em">

<ul><li><a href="Alpha_compositing" title="Alpha compositing">Alpha compositing</a></li>

<li><a href="Layers_(digital_image_editing)" title="Layers (digital image editing)">Layers</a></li>

<li><a href="Text-to-image_model" title="Text-to-image model">Text-to-image</a></li></ul>

</div><table class="nowraplinks navbox-subgroup" style="border-spacing:0"><tbody><tr><th id="2.5D8" scope="row" class="navbox-group" style="width:1%"><a href="2.5D" title="2.5D">2.5D</a></th><td class="navbox-list-with-group navbox-list navbox-odd" style="width:100%;padding:0"><div style="padding:0 0.25em">

<ul><li><a href="Isometric_video_game_graphics" title="Isometric video game graphics">Isometric graphics</a></li>

<li><a href="Parallax_scrolling" title="Parallax scrolling">Parallax scrolling</a></li>

<li><a href="Ray_casting" title="Ray casting">Ray casting</a></li>

<li><a href="Skybox_(video_games)" title="Skybox (video games)">Skybox</a></li></ul>

</div></td></tr></tbody></table><div>

</div></td></tr><tr><th scope="row" class="navbox-group" style="width:1%"><a href="3D_computer_graphics" title="3D computer graphics">3D graphics</a></th><td class="navbox-list-with-group navbox-list navbox-even hlist" style="width:100%;padding:0"><div style="padding:0 0.25em">

<ul><li><a href="3D_projection" title="3D projection">3D projection</a></li>

<li><a href="3D_rendering" title="3D rendering">3D rendering</a></li>

<li>(<a href="Image-based_modeling_and_rendering" title="Image-based modeling and rendering">Image-based</a></li>

<li><a href="Spectral_rendering" title="Spectral rendering">Spectral</a></li>

<li><a href="Unbiased_rendering" title="Unbiased rendering">Unbiased</a>)</li>

<li><a href="Aliasing" title="Aliasing">Aliasing</a></li>

<li><a href="Anisotropic_filtering" title="Anisotropic filtering">Anisotropic filtering</a></li>

<li><a href="Cel_shading" title="Cel shading">Cel shading</a></li>

<li><a href="Fluid_animation" title="Fluid animation">Fluid animation</a></li>

<li><a href="Computer_graphics_lighting" title="Computer graphics lighting">Lighting</a>

<ul><li><a href="Global_illumination" title="Global illumination">Global illumination</a></li></ul></li>

<li><a href="Hidden-surface_determination" title="Hidden-surface determination">Hidden-surface determination</a></li>

<li><a href="Polygon_mesh" title="Polygon mesh">Polygon mesh</a></li>

<li>(<a href="Triangle_mesh" title="Triangle mesh">Triangle mesh</a>)</li>

<li><a href="Shading" title="Shading">Shading</a>

<ul><li><a href="Deferred_shading" title="Deferred shading">Deferred</a></li></ul></li>

<li><a href="Surface_triangulation" title="Surface triangulation">Surface triangulation</a></li>

<li><a href="Wire-frame_model" title="Wire-frame model">Wire-frame model</a></li></ul>

</div></td></tr><tr><th scope="row" class="navbox-group" style="width:1%">Concepts</th><td class="navbox-list-with-group navbox-list navbox-odd hlist" style="width:100%;padding:0"><div style="padding:0 0.25em">

<ul><li><a href="Affine_transformation" title="Affine transformation">Affine transformation</a></li>

<li><a href="Back-face_culling" title="Back-face culling">Back-face culling</a></li>

<li><a href="Clipping_(computer_graphics)" title="Clipping (computer graphics)">Clipping</a></li>

<li><a href="Collision_detection" title="Collision detection">Collision detection</a></li>

<li><a href="Planar_projection" title="Planar projection">Planar projection</a></li>

<li><a href="Reflection_(computer_graphics)" title="Reflection (computer graphics)">Reflection</a></li>

<li><a href="Rendering_(computer_graphics)" title="Rendering (computer graphics)">Rendering</a>

<ul><li><a href="Beam_tracing" title="Beam tracing">Beam tracing</a></li>

<li><a href="Cone_tracing" title="Cone tracing">Cone tracing</a></li>

<li><a href="Checkerboard_rendering" title="Checkerboard rendering">Checkerboard rendering</a></li>

<li><a href="Ray_tracing_(graphics)" title="Ray tracing (graphics)">Ray tracing</a></li>

<li><a href="Path_tracing" title="Path tracing">Path tracing</a></li>

<li><a href="Ray_casting" title="Ray casting">Ray casting</a></li>

<li><a href="Scanline_rendering" title="Scanline rendering">Scanline rendering</a></li></ul></li>

<li><a href="Rotation_(mathematics)" title="Rotation (mathematics)">Rotation</a></li>

<li><a href="Scaling_(geometry)" title="Scaling (geometry)">Scaling</a></li>

<li><a href="Shadow_mapping" title="Shadow mapping">Shadow mapping</a></li>

<li><a href="Shadow_volume" title="Shadow volume">Shadow volume</a></li>

<li><a href="Shear_matrix" class="mw-redirect" title="Shear matrix">Shear matrix</a></li>

<li><a href="Shader" title="Shader">Shader</a></li>

<li><a href="Texel_(graphics)" title="Texel (graphics)">Texel</a></li>

<li><a href="Translation_(geometry)" title="Translation (geometry)">Translation</a></li>

<li><a href="Volume_rendering" title="Volume rendering">Volume rendering</a></li>

<li><a href="Voxel" title="Voxel">Voxel</a></li></ul>

</div></td></tr><tr><th scope="row" class="navbox-group" style="width:1%"><a href="Graphics_software" title="Graphics software">Graphics software</a></th><td class="navbox-list-with-group navbox-list navbox-even hlist" style="width:100%;padding:0"><div style="padding:0 0.25em">

<ul><li><a href="List_of_3D_computer_graphics_software" title="List of 3D computer graphics software">3D computer graphics software</a>

<ul><li><a href="List_of_3D_animation_software" title="List of 3D animation software">animation</a></li>

<li><a href="List_of_3D_modeling_software" title="List of 3D modeling software">modeling</a></li>

<li><a href="List_of_3D_rendering_software" title="List of 3D rendering software">rendering</a></li></ul></li>

<li><a href="Raster_graphics_editor" title="Raster graphics editor">Raster graphics editors</a></li>

<li><a href="Comparison_of_vector_graphics_editors" title="Comparison of vector graphics editors">Vector graphics editors</a></li></ul>

</div></td></tr><tr><th scope="row" class="navbox-group" style="width:1%">Algorithms</th><td class="navbox-list-with-group navbox-list navbox-odd hlist" style="width:100%;padding:0"><div style="padding:0 0.25em">

<ul><li><a href="List_of_computer_graphics_algorithms" class="mw-redirect" title="List of computer graphics algorithms">List of computer graphics algorithms</a></li></ul>

</div></td></tr></tbody></table></div></div><div><div class="zim-footer">

This article is issued from <a class="external text" title="Last edited on 2025-08-07" href="https://en.wikipedia.org/wiki/?title=WebGPU_Shading_Language&oldid=1304743366">Wikipedia</a>. The text is available under <a class="external text" href="https://creativecommons.org/licenses/by-sa/4.0/deed.en">Creative Commons Attribution-Share Alike 4.0</a> unless otherwise noted. Additional terms may apply for the media files.

</div>

</div></div>

</div>

</main>

</div>

</body></html>